import React, {useState, useEffect} from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Swiper, Input,SwiperItem,Image} from '@tarojs/components'
import {get,post} from '../../utils/http'
// 公告
import Announcement from './announcement'
// 导航栏组件
import MenuBar from '../../components/MenuBar'
// 折扣区
import Discount from './discount'
// 今日必买
import MustBuy from './mustBuy'
// 热销商品
import HotGoods from './hotGoods'

import './index.scss'

function Index () {
  // banner
    const [banner,useBanner] = useState(
      [
        {url: require('../../static/images/banner.png'),id:1},
        {url: require('../../static/images/banner2.png'),id:2},
        {url: require('../../static/images/banner2.png'),id:3},
        {url: require('../../static/images/banner2.png'),id:4},
      ]
    )
    // 猜你喜欢nav高亮
    const [isShowNavIndex, useIsShowNavIndex] = useState(0)
    // 猜你喜欢
    const [likeInfo,useLikeInfo] = useState(
      [
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
        {title:'这里是商品的介绍', quantity: '8', price: '888', url: require('../../static/images/ceshi.png') },
      ]
    )
  // 今日必买数据
  const [mustBuyList,useMustBuyList] = useState([
    [
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  }],
    [
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  }],
    [
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  },
      {  buyimg: require('../../static/images/moguj.png'),discount:'5折'  }],
  ])

  // 折扣区
  const [discountList, useDiscountList] = useState(
    [
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
      {discountUrl:require('../../static/images/fushi.png'), newPrice:'￥666', ollPrice:'￥888'},
    ]
  )
  function goToSearch(){
      Taro.navigateTo({
        url:'/pages/index/search/index'
      })
  }
  // 网络请求
  useEffect(() => {
  },[])
    return (
      <View className='yl_index'>
        <View className='index_top'>
          <Image className='search_img' src={require('../../static/images/sousuo.png')} />
          <Input className='yl_search' type='text' placeholder='优邻特选' onFocus={() => {goToSearch()}} />
        </View>
        {/*轮播图*/}
        <Swiper className='yl_swiper'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                vertical={false}
                circular
                previousMargin={10}
                nextMargin={20}
                indicatorDots
                autoplay
                interval={3000}
        >
          {
            banner.map((item,index) => {
              return (
                <SwiperItem className='yl_swiper_item' key={index}>
                    <Image className='yl_search_item' src={item.url} />
                </SwiperItem>
              )
            })
          }
        </Swiper>
        {/*公告*/}
        <Announcement />
        {/*导航栏*/}
        <MenuBar />
        {/*折扣区*/}
        <Discount discountList={discountList}/>
        {/*热销商品*/}
        <MustBuy mustBuyList={mustBuyList}/>
        {/*猜你喜欢*/}
        {/*<Like*/}
        {/*  likeInfo={likeInfo}*/}
        {/*  isShowNavIndex={isShowNavIndex}*/}
        {/*  useIsShowNavIndex={useIsShowNavIndex}*/}
        {/*  />*/}
        {/*热销商品*/}
        <HotGoods />
      </View>
    )
}

export default Index
